<template>
  <div>
    <el-card class="search-card">
      <basic-form
        ref="formData"
        showColon
        :formColumns="formItems"
        :dataSource="formData"
        :handleSearchForm="handleQueryForm"
        :handleClearForm="clearCategorySelect"
        @getFormData="getFormData"
      >
        <CategoryMultipleSelect
          slot="category"
          ref="categoryMultiple"
          @selectCategoryCallback="setFormCateUuids"
        />
      </basic-form>
    </el-card>
    <el-card class="table-card">
      <skus-table
        showPagination
        :tableHeight="480"
        :defaultMinWidth="100"
        :dataSource="TableInfo.list"
        :columns="TableInfo.columns"
        :loading="TableInfo.loading"
        :pageSizes="pageSizes"
        :pagination="pagination"
        :total="pagination.total"
        @pageChange="handlePageChange"
        @pageSizeSelect="handlePageSizeChange"
      >
        <BtnRender slot="content_context" :render="renderBtnsBar" />
      </skus-table>
    </el-card>
    <!-- 修改日志查看 -->
    <EditLogViewDialog
      :visible.sync="editLog.visible"
      :sku-no="editLog.skuNo"
    />
  </div>
</template>
<script>
import BasicForm from '@/components/BasicForm';
import SkusTable from '@/components/skusTable';
import BtnRender from '@/components/JSXRender/BtnRender';
import CategoryMultipleSelect from '@/components/Category/MultipleSelect';
import EditLogViewDialog from './components/EditLogViewDialog';
import skusPage from '@/mixins/commodity/skusPage';
import { FORM_ITEMS, TABLE_COLUMNS } from './constants';
import { getInitFormData, TableInfo } from '@/utils/getUtils';
import { getListPageBtnsBar } from '@/utils/getBtnsRender';
import { setAuthBtnId, createExcelByExport, generateUuid } from '@/utils/bizUtils';
export default {
  mixins: [skusPage],
  components: {
    BasicForm,
    SkusTable,
    BtnRender,
    CategoryMultipleSelect,
    EditLogViewDialog
  },
  data () {
    return {
      formItems: FORM_ITEMS,
      formData: getInitFormData(FORM_ITEMS),
      TableInfo: new TableInfo({ columns: TABLE_COLUMNS }),
      pageSizes: [10, 100, 1000],
      // 修改日志
      editLog: {
        visible: false,
        skuNo: ''
      },
    }
  },
  created () {
    this.getTableData()
  },
  methods: {
    // 渲染按钮操作栏
    renderBtnsBar (h) {
      const finalBtns = [
        {
          label: '编辑',
          method: this.handleEdit,
          // hasAuth: true
        },
        {
          label: '导出',
          method: this.handleExport,
          loading: this.btnLoading.export,
          // hasAuth: true
        },
        {
          label: '编辑日志',
          method: this.handleEditLog
        }
      ]
      return getListPageBtnsBar(h, finalBtns, this.showBtn, 'start')
    },
    // 编辑
    handleEdit () {
      setAuthBtnId('编辑')
      this.$router.push({
        name: 'latentProductAnalysisThresholdEdit'
      })
    },
    // 导出
    async handleExport () {
      setAuthBtnId('导出')
      const data = {}
      const loadingFn = state => { this.btnLoading.export = state }
      const exportService = () => {}
      const res = await exportService(data, loadingFn)
      createExcelByExport({ res, excelTitle: `潜在商品分析阈值管理_${generateUuid()}` })
    },
    // 编辑日志
    handleEditLog (row) {
      this.editLog.visible = true
      this.editLog.skuNo = row.skuNo
    },
    // 获取表格数据
    async getTableData () {
      setAuthBtnId('查询')
      const data = {}
      const requestService = () => {}
      const res = await requestService(data, this.TableInfo.setLoading)
      this.TableInfo.setList(res?.retData?.results)
      this.setTotalNum(res?.retData?.totalNum)
    },
  }
}
</script>
<style lang="less" scoped>
/deep/ .table-action {
  margin-right: 0;
}
</style>
